import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index.js";
import "./style.css";
import AuthModal from './components/AuthModal.vue';

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"
import vue3PicturePreview from 'vue3-picture-preview'
import 'virtual:svg-icons-register'

import {
  ElRow,
  ElCol,
  ElInput, 
  ElButton,
  ElDialog,
  ElForm, 
  ElFormItem, 
  ElLink,
  ElSelect, 
  ElOption, 
  ElDatePicker,
  ElCascader,
  ElCarousel,
  ElCarouselItem,
  ElRadioGroup,
  ElRadioButton,
  ElAvatar,
  ElPopover,
  ElPagination,
  ElMessage,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,  
  ElUpload,
  ElCheckbox,
  ElInputTag
} from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import ElementPlus from 'element-plus'

const components = [
  ElRow,
  ElCol,
  ElInput, 
  ElButton,
  ElDialog,
  ElForm, 
  ElFormItem, 
  ElLink,
  ElSelect, 
  ElOption, 
  ElDatePicker,
  ElCascader,
  ElCarousel,
  ElCarouselItem,
  ElRadioGroup,
  ElRadioButton,
  ElAvatar,
  ElPopover,
  ElPagination,
  ElMessage,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElUpload,
  ElCheckbox,
  ElInputTag
]

const app = createApp(App)

components.forEach(component => {
  app.component(component.name, component)
})

import SvgIcon from "@/components/SvgIcon.vue"
import EmptyData from "./components/EmptyData.vue";
app.component("svg-icon", SvgIcon)
app.component("empty-data", EmptyData)

app.component('AuthModal', AuthModal)

import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

app.use(router)
app.use(pinia)
app.use(vue3PicturePreview)
app.mount("#app");
